import React, { useState, useEffect, useCallback, useMemo, FC, useRef } from 'react';
import * as charts from 'echarts';
import ReactEcharts from 'echarts-for-react';

type EChartsOption = charts.EChartsOption;

const EchartsTest: FC = (props) => {
  const getOption = () => {
    const option: EChartsOption ={
        tooltip: {
          trigger: 'item',
              formatter: '领用客户数 <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top:'5%'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 1, name: '宋浩然' },
              { value: 6, name: '钟凯' },
              { value: 1, name: '张晓' },
              { value: 12, name: '张妍' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    return option;
  };
  return (
    <>
      <div>
        <div style={{ width: '100%', }}>
          <ReactEcharts option={getOption()} />
        </div>
      </div>
    </>
  );
};

export default EchartsTest;

